<template>
  <div class="dialog-bg" @click="$emit('close-red-dialog')">
    <particle-burst
      background-color="transparent"
      :colors="['#8dddd3', '#f7ca3c', '#f49870', '#c86eb4']"
      style="
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        pointer-events: none;
        z-index: 1;
      "
      :redraw="true"
    />
    <div
      :class="[
        'red-dialog',
        { 'red-dialog--has-code': isHasCode },
        { 'red-dialog--has-code-error-msg': codeErrorMsg },
      ]"
      @click.stop=""
    >
      <div
        v-if="isCantRevice"
        class="red-dialog-bottom"
        @click="getRedenvelopeInfo"
      >
        <!-- <div class="red-dialog-open"></div> -->
        <div class="red-dialog-btn1"></div>
      </div>
      <div v-if="codeErrorMsg" class="code-error-icon">
      </div>
      <div v-if="codeErrorMsg" class="code-error-msg">
        {{ codeErrorMsg }}
      </div>
      <div v-if="isHasCode" class="code-wrap">
        <div class="code-wrap-qr">
          <img :src="'data:image/png;base64,' + redEnvlopeCoverImgSrc" alt="">
        </div>
        <div class="code-wrap-text">
          <span>截图保存后</span> <br>
          <span>请使用微信"扫一扫"来领取红包封面哦~</span>
        </div>
      </div>
      <!-- <img src="" alt=""> -->
      <!-- <div class="red-dialog-choose">
      <div class="red-dialog-btn2"></div>
      <div class="red-dialog-btn3" @click="gotowish"></div>
    </div> -->
    </div>
  </div>
  <!-- <img
    :src="'data:image/png;base64,' + redenvelopelist.redEnvlopeCover"
    alt=""
  > -->
</template>

<script>
import { ParticleBurst } from './particle-burst'
export default {
  components: { ParticleBurst },
  props: {
    haveTaked: {
      type: Boolean,
      default: false
    }
  },
  emits: ['close-red-dialog','gift-received'],
  data () {
    return {
      redenvelopelist: {
        redEnvlopeCover: ''
      },
      isHasCode: false,
      codeErrorMsg: '',
      redEnvlopeCoverImgSrc: ''
    }
  },
  wathch: {
    // haveTaked: {
    //   handler(val){
    //     if(val){
    //       this.getRedenvelopeInfo()
    //     }
    //   },
    //   immediate: true
    // }
  },
  computed: {
    isCantRevice () {
      return !(this.isHasCode || this.codeErrorMsg)
    }
  },
  created () {
    if (this.haveTaked) {
      this.getRedenvelopeInfo()
    }
  },
  methods: {

    gotowish () {
      this.$router.push('./wish')
    },
    async getRedenvelopeInfo () {
      const res = await this.$api.redenvelope.getRedenvelopeInfo()
      const { result: { msg, redEnvlopeCover } } = res
      if (!redEnvlopeCover) {
        this.codeErrorMsg = msg
      } else {
        this.redEnvlopeCoverImgSrc = redEnvlopeCover
        this.isHasCode = true
      }
      this.$emit('gift-received')
    }
  }
}
</script>

<style lang="scss" scoped>
@keyframes dialogShow {
  0% {
    opacity: 0.1;
    transform: scale(0.01);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.dialog-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.red-dialog {
  position: relative;
  top: -0.8rem;
  width: 3.63rem;
  height: 6.42rem;
  background-image: url("./images/dialog/bg.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: dialogShow 0.8s ease-in;
  z-index: 2;
  .red-dialog-icon {
    position: absolute;
    top: 3.84%;
    left: 7.1%;
    width: 0.5rem;
    height: 0.51rem;
    background-image: url("./images/dialog/icon.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
  }
  .red-dialog-bottom {
    position: absolute;
    bottom: 0;
    width: 3.66rem;
    height: 2.08rem;
    // .red-dialog-open {
    //   position: relative;
    //   top: -0.1rem;
    //   width: 1.22rem;
    //   margin: 0 auto;
    //   height: 1.22rem;
    //   background-image: url("./images/dialog/open.png");
    //   background-size: 100% auto;
    //   background-repeat: no-repeat;
    // }
    .red-dialog-btn1 {
      position: relative;
      bottom: -2.8rem;
      margin: 0 auto;
      width: 2.39rem;
      height: 0.62rem;
      background-image: url("./images/dialog/btn1.png");
      background-size: 100% auto;
      background-repeat: no-repeat;
      transform: scale(1.65);
    }
  }
  .red-dialog-choose {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.73rem;
    .red-dialog-btn2 {
      position: absolute;
      top: 0;
      left: 0;
      width: 3.18rem;
      height: 0.73rem;
      background-image: url("./images/dialog/btn2.png");
      background-size: 100% auto;
      background-repeat: no-repeat;
    }
    .red-dialog-btn3 {
      position: absolute;
      top: 0;
      right: 0;
      width: 3.18rem;
      height: 0.73rem;
      background-image: url("./images/dialog/btn3.png");
      background-size: 100% auto;
      background-repeat: no-repeat;
    }
  }
}
@keyframes rotate180 {
  0% {
    transform: rotate3d(0, 1, 0, 0);
  }
  100% {
    transform: rotate3d(0, 1, 0, 180deg);
    background-image: url("./images/dialog/bg-red-envelope-info.jpg");
  }
}
.red-dialog--has-code-error-msg {
  padding-top: 3.8rem;
  //animation: rotate180 1s ease-in forwards;
  background-image: url("./images/dialog/bg-red-envelope-info.jpg");
  .code-error-icon {
    position: absolute;
    width: 1.48rem;
    height: 1.49rem;
    left: 50%;
    top: 2.2rem;
    margin-left: -0.74rem;
    background: url('./images/dialog/icon-gift-error.png');
    background-size: 100% auto;
  }
  .code-error-msg {
    color: #fff;
    font-size: 0.22rem;
    text-align: center;
  }
}
.red-dialog--has-code {
  //animation: rotate180 1s ease-in forwards;
   background-image: url("./images/dialog/bg-red-envelope-info.jpg");
  .code-wrap {
    animation: display 1s forwards;
    animation-delay: 1s;
    .code-wrap-qr {
      width: 2.5rem;
      height: 2.5rem;
      margin: auto;
      position: relative;
      top: 2rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .code-wrap-text {
      width: 3rem;
      margin: auto;
      padding-top: 2.5rem;
      font-size: 12px;
      color: #fff;
      text-align: center;
    }
  }
}
</style>
